<template>
  <view>
    <view class="search-bar">
      <u-search
        v-model="formData.project_name"
        placeholder="搜索需求（项目名称）"
        @search="clickSearch"
        @custom="clickSearch"
        @clear="handleClear"
        shape="round"
        bg-color="#f5f5f5"
        margin="15rpx"
      ></u-search>
    </view>
    <u-tabs :list="tabsList" @click="tabsClick" :scrollable="false"> </u-tabs>

    <view style="display: flex">
      <u-sidebar
        v-model="state.sidebarIndex"
        lineColor="#ff6b6b"
        activeColor="#ff6b6b"
        :width="`80px`"
        fontSize="16px"
        @change="sidebarChange"
        :key="sidebarKey"
      >
        <u-sidebar-item label="全部" value="" />
        <u-sidebar-item label="协会" :value="8" />
        <u-sidebar-item label="物资贸易商" :value="7" />
        <u-sidebar-item label="劳务" :value="6" />
        <u-sidebar-item label="监理" :value="5" />
        <u-sidebar-item label="设计" :value="4" />
        <u-sidebar-item label="物资工厂" :value="3" />
        <u-sidebar-item label="工程公司" :value="2" />
        <u-sidebar-item label="居间人" :value="1" />
      </u-sidebar>
      <scroll-view
        class="function-scroll"
        scroll-y
        @scrolltolower="buttonScrolltolower"
        show-scrollbar="false"
        :scroll-with-animation="true"
        :style="{ height: 'calc(100vh - 200rpx)' }"
      >
        <u-empty
          mode="data"
          text="暂无数据"
          v-if="dataList.length == 0"
          marginTop="100%"
          :icon="getResource('img/phone/mini/no_data.png')"
        />

        <view v-else>
          <view class="tab-panel">
            <view
              class="tab-panel-item tab-active"
              v-for="(item, index) in dataList"
              :key="index"
              @click="handleItemClick(item)"
            >
              <!-- v-if="item.msg.shi_gong" -->
              <view class="aui-flex">
                <view class="aui-shop-img">
                  <I-Images
                    :src="
                      item.msg?.shi_gong?.[0]?.url ??
                      getResource('img/phone/mini/b1.png')
                    "
                    lazyLoad
                    mode="aspectFill"
                    showLoading
                    showError
                    width="70px"
                    height="120px"
                    fade
                  >
                  </I-Images>
                </view>
              </view>
              <view style="width: 100%; position: relative">
                <view class="aui-flex-box">
                  <view class="title"
                    >{{ item.need_title
                    }}<span v-if="item.status != 2"
                      >({{ item.status_name }})</span
                    ></view
                  >
                  <view class="tags">
                    <text class="tag">加急状态</text>
                    <text class="tag">{{
                      item.project_jia_ji == 0 ? "加急中" : "不加急"
                    }}</text>
                  </view>
                  <view class="location"
                    >项目地点：{{ item.need_city_name || "未填写" }}</view
                  >
                  <view class="type"
                    >项目类型：{{ item.company_type_name }}需求
                  </view>
                  <view class="type">开始时间：{{ item.publish_time_show }} </view
                  ><view class="type">截至时间：{{ item.need_ent_date }} </view>
                  <view class="type" v-if="item.status_note">
                    审核备注：{{ item.status_note }}</view
                  >
                </view>
                <view
                  style="
                    display: flex;
                    align-items: center;
                    width: 100%;
                    justify-content: flex-end;
                  "
                >
                  <view
                    style="
                      font-size: 0.6rem;
                      color: green;
                      font-weight: 400;
                      margin-top: 0.3rem;
                      position: absolute;
                      left: 0;
                    "
                    v-if="formData.stage == 2"
                  >
                    <span>已报名 ({{ item.bao_num }})</span>
                  </view>
                  <!-- <view class="aui-flex-box" v-if="item.stage != 3">
                    <span><i class="icon icon-user"></i>0</span>
                  </view>
                  <view class="aui-list-right" v-if="item.stage != 3">
                    <span><i class="icon icon-coin"></i>0</span>
                  </view> -->
                  <view
                    class="aui-list-right"
                    @click.stop="xiuGai(item)"
                    v-if="[1, 3].includes(item.stage)"
                    style="
                      padding: 0px 10px;
                      height: 25px;
                      line-height: 20px;
                      background-color: #f0f0f0;
                      border-radius: 4px;
                      background-color: #e0e0e0;
                    "
                  >
                    <span style="font-size: 10px; font-weight: 600">修改</span>
                  </view>

                  <view
                    class="aui-list-right"
                    @click.stop="apply(item)"
                    v-if="[2].includes(item.stage)"
                    style="
                      padding: 0px 10px;
                      height: 25px;
                      line-height: 20px;
                      background-color: #f0f0f0;
                      border-radius: 4px;
                      background-color: #e0e0e0;
                    "
                  >
                    <span style="font-size: 10px; font-weight: 600"
                      >查看报名企业
                      <!-- ({{ item.bao_num }}) -->
                    </span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, toRefs } from "vue";
import { showToast, showLoading, hideLoading } from "@/utils/toast";
import { getResource } from "../../../utils/Resource";
import { gatList, getStage } from "../../../api/demand.js";

import { onShow, onLoad } from "@dcloudio/uni-app";

// 状态管理
const state = reactive({
  sidebarIndex: 0,
  dataList: [],
  tabsList: [],
  count: 0,
  formData: {
    project_name: "",
    company_type: "",
    stage: "",
    page_no: 1,
    page_size: 10,
    page_count: 1,
  },
});
const { formData, dataList, tabsList } = toRefs(state);

onShow(async () => {
  formData.value.page_no = 1;
  dataList.value = [];
  await second();
  await init();
});
const sidebarChange = async (e) => {
  if (!e || e.value === undefined) return;
  // dataList.value = [];
  // formData.value.page_no = 1;
  // console.log(e.value);
  formData.value.company_type = e.value;
  await second();
  await init();
};

const init = async () => {
  try {
    showLoading("加载中...");
    const res = await gatList(formData.value);
    console.log(res);
    const { count, page_count, page_no, page_size, list } = res.data;
    dataList.value = [...dataList.value, ...list];
    state.count = count;
    Object.assign(formData.value, { page_count, page_no, page_size });
  } catch (error) {}
};

const second = async () => {
  try {
    formData.value.page_no = 1;
    dataList.value = [];
    const res = await getStage({
      project_name: formData.value.project_name,
      company_type: formData.value.company_type,
    });
    if (formData.value.stage == "") {
      formData.value.stage = res.data[0].id;
    }
    state.tabsList = res.data;
  } catch (error) {}
};

const tabsClick = async (e) => {
  formData.value.page_no = 1;
  dataList.value = [];
  formData.value.stage = e.id;
  await second();
  await init();
};

// 搜索处理
const clickSearch = async () => {
  if (!formData.value.project_name) {
    showToast("请输入项目名称关键词");
    return;
  }
  formData.value.page_no = 1;
  dataList.value = [];
  await second();
  await init();
};

// 清空搜索
const handleClear = async () => {
  formData.value.project_name = "";
  formData.value.page_no = 1;
  dataList.value = [];
  await init();
};

// 点击列表项（跳转详情页）
const handleItemClick = (e) => {
  if (e.status == 2) {
    uni.navigateTo({
      url: `/pages/user/component/recruitList?id=${e.id}`,
    });
  }
};

const xiuGai = (e) => {
  if (e.status == 1 || e.status == 3) {
    // console.log(e);
    uni.navigateTo({
      url: `/pages_index/demand/component/dataForm?id=${e.id}&type=${e.company_type}`,
    });
    // if (e.company_type == "2") {
    //   uni.navigateTo({
    //     url: `/pages_index/demand/component/project?id=${e.id}&type=2`,
    //   });
    // }
    // if (e.company_type == "5") {
    //   uni.navigateTo({
    //     url: `/pages_index/demand/component/supervisorForm?id=${e.id}&type=2`,
    //   });
    // }
    // if (e.company_type == "6") {
    //   uni.navigateTo({
    //     url: `/pages_index/demand/component/dataForm?id=${e.id}&type=2`,
    //   });
    // }
    // if (e.company_type == "4") {
    //   uni.navigateTo({
    //     url: `/pages_index/demand/component/designForm?id=${e.id}&type=3`,
    //   });
    //   return;
    // }
  }
};
const apply = (e) => {
  uni.navigateTo({
    url: `/pages/user/component/apply?id=${e.id}`,
  });
};
const buttonScrolltolower = async () => {
  if (state.count != dataList.value.length) {
    formData.value.page_no++;
    showLoading("加载中");
    await init();
  } else {
    showToast("已经最后一页了~");
  }
};
</script>

<style lang="scss" scoped>
:deep(.u-image) {
  align-items: center !important;
  display: flex !important;
}
</style>
<style lang="scss">
.tab-panel {
  .tab-panel-item {
    display: flex;
    background: #fff;
    padding: 10px;
    margin: 12px 12px 0 12px;
    border-radius: 3px;
    box-shadow: 0 4px 2px #bfbfbf;
    &.tab-active {
      .aui-flex {
        // padding: 15px 0 0 15px;

        // position: relative;
        display: flex;
        align-items: center;

        .aui-shop-img {
          // width: 120px;
          // height: 120px;
          margin-right: 1rem;

          image {
            width: 100%;
            height: 100%;
            display: block;
            border: none;
          }
        }

        &.aui-flex-pic {
          padding: 10px 0 0 0;
          position: absolute;
          right: 0;
          bottom: 1px;
          box-shadow: none;
          background: none;
        }
      }
    }
  }
  .aui-list-right {
    margin-left: 1rem;
  }

  .aui-flex-box {
    // flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;

    .title {
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: #444444;
      margin-bottom: 0.5rem;
    }

    .tags {
      .tag {
        font-size: 0.6rem;
        background: #f1efef;
        border-radius: 2px;
        padding: 0.1rem 0.4rem;
        color: #949494;
        // margin-right: 0.3rem;
      }
    }

    .location {
      font-size: 0.6rem;
      color: #ee4b46;
      font-weight: normal;
      margin-top: 0.3rem;
    }

    .type {
      font-size: 0.6rem;
      color: #9e9e9e;
      font-weight: normal;
      margin-top: 0.3rem;
    }
  }

  .icon {
    width: 20px;
    height: 20px;
    display: block;
    border: none;
    float: left;
    background-size: 20px;
    background-repeat: no-repeat;

    &-user {
      background-image: url("");
      background-size: 15px;
      width: 15px;
      height: 15px;
      margin-top: 2px;
      margin-right: 3px;
    }

    &-coin {
      background-image: url("");

      margin-top: 3px;
      margin-right: 3px;
      background-size: 15px;
      width: 15px;
      height: 15px;
    }
  }
}
</style>
